<template>
  <div class="address">
    <van-nav-bar fixed :z-index="1000" title="选择地址" left-arrow @click-left="back()" />
    <baidu-map id="allmap" class="allmap" @ready="handler"></baidu-map>
    <div class="shade" v-show="searchCityList.length > 0 || searNone"></div>
    <!-- 搜索框 -->
    <div class="search">
      <div class="top"></div>
      <form action>
        <van-search
          @cancel="onCancel"
          v-model="text"
          show-action
          placeholder="请输入省/市/区/县名"
          shape="round"
          background="white"
          left-icon="search"
          @input="serCity"
        />
      </form>
    </div>
    <!-- 搜索城市 -->
    <div class="ser-City">
      <div v-for="(city,index) in searchCityList" :key="index">
        <van-cell style="padding-left:0.7rem" :title="city.name" is-link @click="chooseCity(city)" />
      </div>
      <div v-show="searNone">
        <van-cell style="padding-left:0.7rem;color:red" title="未找到" />
      </div>
    </div>
    <!-- 当前定位 -->
    <div class="now-city">
      <div>当前定位</div>
      <div class="city">
        <div class="left" @click="handlerCurrentCity()">
          <van-icon name="location" color="#ee7927" />
          <span>{{currentCity}}</span>
        </div>
        <div class="right">
          <span>重新定位</span>
        </div>
      </div>
    </div>
    <!-- 历史访问 -->
    <div class="history-city">
      <div>历史访问城市</div>
      <div class="city">
        <div
          class="left"
          v-for="(item,index) in historyCity"
          :key="index"
          @click="chooseHistory(item.name,item.center)"
        >
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
    <!-- 热门城市/全国 -->
    <div class="hot-city">
      <div>热门城市/全国</div>
      <div class="city">
        <div class="left" v-for="(item,index) in hot_city" :key="index" @click="hotCity(item.addr)">
          <span>{{item.addr}}</span>
        </div>
      </div>
    </div>

    <!-- <van-popup v-model="show">
            <div style="padding-left:0.11rem;padding-right:0.11rem;font-size:0.3rem">
                <p v-for="(item,index) in hotCityList" :key="index" @click="chooseCity(item.center,item.name)">{{item.name}}</p>
            </div>
    </van-popup>-->
  </div>
</template>

<script>
import { getCity } from "../../api/ajax.js";

export default {
  data() {
    return {
      hot_city: [
        { addr: "北京" },
        { addr: "上海" },
        { addr: "深圳" },
        { addr: "杭州" },
        { addr: "苏州" },
        { addr: "广州" },
        { addr: "天津" },
        { addr: "南京" },
        { addr: "东莞" }
      ],
      currentCity: "",
      text: "",
      searchCityList: [],
      searNone: false,
      show: false,
      hotCityList: [],
      historyCity: []
    };
  },
  methods: {
    handler({ BMap, map }) {
      this.loacl(BMap, map, data => {
        this.currentCity = data.addressComponents.city;
      });
    },
    onCancel() {
      this.searNone = false;
      this.searchCityList = "";
    },
    serCity(val) {
      if (!!val) {
        this.getCity(val);
      } else {
        this.searNone = false;
        this.searchCityList = [];
      }
    },
    handlerCurrentCity() {
      this.text = this.currentCity;
      this.serCity(this.currentCity);
    },
    chooseHistory(name,center) {
      this.chooseCity({
        name,center
      });
    },

    // 选择城市
    chooseCity({ center, name }) {
      this.$pcCookie.set({
        key: "locationPoint",
        value: center
      });
      this.$pcCookie.set({
        key: "locationCity",
        value: name
      });

      let currentLocationArr =
        JSON.parse(this.$pcCookie.get("locationHistory") || "[]") || [];

      let arr = [];
      for (var i in currentLocationArr) {
        arr.push(currentLocationArr[i].name);
      }

      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == name) {
          currentLocationArr.splice(i, 1);
        }
      }

      currentLocationArr.unshift({
        center,
        name
      });

      currentLocationArr = currentLocationArr.splice(0, 3);
    //   console.log(currentLocationArr);
      this.$pcCookie.set({
        key: "locationHistory",
        value: currentLocationArr
      });
      this.historyCity = currentLocationArr;
      this.jumpReplace("home");
    },

    async hotCity(city) {
      this.text = city;
      this.serCity(city);
      // const result = await this.getCity(city);
      // console.log(result)
      return;
      if (result.constructor == Object) {
        this.chooseCity(result[1]);
      } else {
        if (result.length == 2) {
          this.show = true;
          this.hotCityList = result;
        } else {
          this.chooseCity(result[0]["center"], result[0]["name"]);
        }
      }
    },
    //获取城市列表
    async getCity(city) {
      const result = await getCity({
        city
      });
      //   console.log(result);
      //   console.log(result instanceof Array);
      if (!!result) {
        this.searNone = false;
        if (result instanceof Array) {
          this.searchCityList = result;
        } else {
          let tempArr = [];
          for (const key in result) {
            if (result.hasOwnProperty(key)) {
              const element = result[key];
              tempArr.push(element);
            }
          }
          this.searchCityList = tempArr;
        }
      } else {
        this.searNone = true;
      }
    },
    //   获取cookie中的历史城市
    getCookieCity() {
      this.historyCity = JSON.parse(
        this.$pcCookie.get("locationHistory") || "[]"
      );
    }
  },

  mounted() {
    this.getCookieCity();
  }
};
</script>

<style lang="scss" scoped>
.address {
  padding-top: 100px;
  height: 100%;
  width: 100%;
  background-color: #f4f4f4;
  overflow: scroll;
  position: fixed;
  .shade {
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);
    position: fixed;
    z-index: 50;
    transform: 0.5s all;
  }
  .search {
    position: fixed;
    top: 45px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    .top,
    .bottom {
      height: px2rem(5);
      background-color: white;
    }
  }
  .ser-City {
    width: 100%;
    background-color: pink;
    position: absolute;
    z-index: 999;
    border-bottom: 1px solid #cccccc;
  }
  .now-city {
    margin-bottom: px2rem(10);
    height: px2rem(90);
    background-color: #fff;
    padding-left: px2rem(14);
    padding-top: px2rem(10);
    color: #a6a6a6;
    .city {
      padding-top: px2rem(15);
      padding-bottom: px2rem(15);
      .left {
        float: left;
        height: px2rem(38);
        width: 30%;
        background-color: #f4f4f4;
        border-radius: px2rem(25);
        line-height: px2rem(38);
        text-align: center;
        color: black;
      }
      .right {
        float: right;
        height: px2rem(38);
        width: 30%;
        line-height: px2rem(38);
        text-align: center;
        color: #ee7927;
      }
    }
  }
  .history-city {
    // height: px2rem(90);
    background-color: #fff;
    padding-left: px2rem(14);
    padding-top: px2rem(10);
    overflow: hidden;
    color: #a6a6a6;
    .city {
      padding-top: px2rem(15);
      padding-bottom: px2rem(15);
      .left {
        float: left;
        height: px2rem(38);
        margin-right: px2rem(10);
        margin-bottom: px2rem(10);
        width: 30%;
        background-color: #f4f4f4;
        border-radius: px2rem(25);
        line-height: px2rem(38);
        text-align: center;
        color: black;
      }
    }
  }
  .hot-city {
    background-color: #fff;
    padding-left: px2rem(14);
    padding-top: px2rem(10);
    padding-bottom: px2rem(10);
    color: #a6a6a6;
    overflow: hidden;
    .city {
      padding-top: px2rem(15);
      padding-bottom: px2rem(15);
      .left {
        float: left;
        height: px2rem(38);
        margin-right: px2rem(10);
        margin-bottom: px2rem(10);
        width: 30%;
        background-color: #f4f4f4;
        border-radius: px2rem(25);
        line-height: px2rem(38);
        text-align: center;
        color: black;
      }
    }
  }
}
</style>
